<template>
<div class="product">
    <!--搜索表单-->
    <div class="common-seach-wrap">
      <el-form
        size="small"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
      >
        <el-form-item :label="$t('product.review')">
          <el-select size="small" v-model="searchForm.score" placeholder="">
            <el-option :label="$t('product.all')" :value="0"></el-option>
            <el-option
              v-for="(item, index) in commentList"
              :key="index"
              :label="item.name"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('product.product_name')">
          <el-input
            size="small"
            v-model="searchForm.name"
            :placeholder="$t('product.input_product_name')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="Search" @click="onSubmit"
            >{{$t('product.search')}}</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('product.all_reviews')" name="-1"></el-tab-pane>
        <el-tab-pane :label="$t('product.pending_review_label') + num + ')'" name="0"></el-tab-pane>
        <el-tab-pane :label="$t('product.review_approved')" name="1"></el-tab-pane>
        <el-tab-pane :label="$t('product.review_rejected')" name="2"></el-tab-pane>
      </el-tabs>
    </template>

    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column :label="$t('product.product')" width="400px" show-overflow-tooltip>
            <template #default="scope">
              <div class="product-info">
                <div class="pic">
                  <img v-img-url="scope.row.imagePath" alt="" />
                </div>
                <div class="info">
                  <div class="name">{{scope.row.productName}}</div>
                  <div class="price">￥{{scope.row.productPrice}}</div>
                  <div class="name">{{$t('product.order_number',{place1:scope.row.orderNo})}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickName" :label="$t('product.user')"></el-table-column>
          <el-table-column prop="score" :label="$t('product.rating')">
            <template #default="scope">
              <span v-if="scope.row.score == 10" class="red">{{$t('product.positive')}}</span>
              <span v-else-if="scope.row.score == 20" class="orange">{{$t('product.neutral')}}</span>
              <span v-else-if="scope.row.score == 30" class="gray">{{$t('product.negative')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            :label="$t('product.review_content')"
            width="200"
            show-overflow-tooltip
          >
            <template #default="scope">
              <p class="ww100 text-ellipsis-2">{{scope.row.content}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="isPicture" :label="$t('product.image')">
            <template #default="scope">
              <span v-if="scope.row.isPicture == 0">{{$t('product.no')}}</span>
              <span v-else>{{$t('product.yes')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('product.review_status')">
            <template #default="scope">
              <span v-if="scope.row.status == 0" class="red fb">{{$t('product.pending_review')}}</span>
              <span v-if="scope.row.status == 1" class="green">{{$t('product.review_approved')}}</span>
              <span v-if="scope.row.status == 2" class="gray9">{{$t('product.review_rejected')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sort" :label="$t('product.sort')"></el-table-column>
          <el-table-column
            prop="createTime"
            :label="$t('product.review_time')"
            width="130"
          ></el-table-column>
          <el-table-column fixed="right" :label="$t('product.action')" width="90">
            <template #default="scope">
              <el-button
                @click="detailClick(scope.row)"
                type="text"
                size="small"
                v-auth="'/product/comment/detail'"
                >{{$t('product.detail')}}</el-button
              >
              <el-button
                @click="delClick(scope.row)"
                type="text"
                size="small"
                v-auth="'/product/comment/delete'"
                >{{$t('product.delete')}}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import PorductApi from "@/api/product.js";
export default {
  components: {},
  data() {
    return {
      loading: true,
      activeName: "-1",
      num: 0,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 20,
      /*总条数*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*搜索参数*/
      searchForm: {
        score: 0,
        name: ""
      },
      /*评价等级*/
      commentList: [{
        name: $t("product.positive"),
        val: 10
      }, {
        name: $t("product.neutral"),
        val: 20
      }, {
        name: $t("product.negative"),
        val: 30
      }],
      status: -1
    };
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      let Params = self.searchForm;
      self.getData(Params);
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getData();
    },
    /*获取列表*/
    getData(param = "") {
      let self = this;
      let Params = {};
      Params.status = self.status;
      Params.pageIndex = self.curPage;
      Params.pageSize = self.pageSize;
      if (param != "") {
        Params.score = param.score;
        Params.name = param.name;
      }
      PorductApi.getCommentList(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.comments.records;
        self.totalDataNumber = res.data.comments.total;
        self.num = res.data.num;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*打开编辑*/
    detailClick(row) {
      this.$router.push({
        path: "/product/comment/Detail",
        query: {
          commentId: row.commentId
        }
      });
    },
    /*订单详情*/
    orderClick(row) {
      this.$router.push({
        path: "/product/comment/Order",
        query: {
          order_id: row.orderId
        }
      });
    },
    /*删除*/
    delClick: function (row) {
      let self = this;
      ElMessageBox.confirm($t("product.delete_confirm"), $t("product.tip"), {
        type: "warning"
      }).then(() => {
        PorductApi.delComment({
          commentId: row.commentId
        }).then(data => {
          ElMessage({
            message: $t("product.delete_success"),
            type: "success"
          });
          self.getData();
        });
      });
    },
    /*搜索查询*/
    onSubmit() {
      let self = this;
      self.loading = true;
      let Params = self.searchForm;
      Params.pageIndex = self.curPage;
      Params.pageSize = self.pageSize;
      Params.status = self.status;
      PorductApi.getCommentList(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.comments.records;
        self.totalDataNumber = res.data.comments.total;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*切换选项卡*/
    handleClick(tab, event) {
      let self = this;
      self.curPage = 1;
      self.loading = true;
      self.status = tab.name;
      self.getData();
    }
  }
};
</script>

